<template>
      <div class="header">
          <span>田贵斌个人博客</span>
          <div class="menu">
              <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" router="true">
              <el-menu-item index="1" route="/">首页</el-menu-item>
              <el-menu-item index="2" route="/components/home/BlogIndexCope">我的工作台</el-menu-item>
              <el-menu-item index="3" route="/2">消息中心</el-menu-item>
              <el-menu-item index="4" route="/1">关于</el-menu-item>
            </el-menu>
          </div>
          <div>
            <el-input type="text" placeholder="请输入内容" v-model="input">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
      </div>
</template>

<script>
export default {
    name: 'BlogHeader',
    data() {
      return {
        activeIndex: '1',
        input:'',
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style>
  .header {
    background-color: #fff;
    width: 100%;
    height:60px;
    position:absolute;
    top:0;
    left:0;
    right:0;
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: space-around;
    align-items: center;
}
span{
  font-size: 20px;
  margin-left: 40px;
  margin-right: 40px;
}
div{
  margin-right: 60px;
}
</style>